<template>
  <div class="center">
    <div class="left-nav">
      <div class="left-collapse" @click="toggleLeft">
        <div :class="data.showLeft ? 'arrow-collapse' :'arrow-expand'"></div>
      </div>
      <div class="nav-tree-list" v-show="data.showLeft">
        <div class="nav-tree-item" :class="item.active===true ?'iconActive' :'' " v-for="(item,index) in data.navTree"
             :key="index" @click="selectItem(item,index)">
          <img :src="item.checked_icon" alt="" v-if="item.active===true">
          <img :src="item.icon" alt="" v-else>
        </div>
      </div>
      <transition name="animate__fadeInLeft"
                  enter-active-class="animate__animated animate__fadeInLeft"
                  leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <div class="nav-tree-select" v-show="data.showLeft">
          <LeftTree :treeData="data.treeItem" @getCheckedNavData="getCheckedNavData"
                    v-if="Object.keys(data.treeItem).length>0"></LeftTree>
        </div>
      </transition>
    </div>
    <div class="right-nav">
      <div class="right-collapse" style="display: none;">
        <div :class="data.showRight ? 'arrow-collapse' :'arrow-expand'"></div>
      </div>
      <transition name="animate__fadeInLeft"
                  enter-active-class="animate__animated animate__fadeInRight"
                  leave-active-class="animate__animated animate__fadeOutRight"
      >
        <div class="form-box">
          <div v-show="data.currentStatus===1">
            <DynamicSlice @closeTab="closeRightTab" @receiveSliceFormData="receiveSliceFormData"></DynamicSlice>
          </div>
          <div v-show="data.currentStatus===2">
            <slice-condition @closeTab="closeRightTab" @receiveSliceConditionData="receiveSliceConditionData"></slice-condition>
          </div>
        </div>
      </transition>
    </div>
    <div id="drawarea">
      <img src="http://r74mocdcd.hd-bkt.clouddn.com/yushi/waterfall-g42eb357c6_1920.jpg" alt="">
    </div>
    <el-affix target=".center" :offset="80" position="bottom">
      <div class="bottom-btn">
        <div class="button_groups">
          <div class="btn-list">
            <div class="btn-item" :class="data.currentStatus===item.id ? 'active' :'' " v-for="(item,index) in data.bottom_btn_groups" :key="item.id" :title="item.title"
                 @click="changeStatus(item,index)">
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  placement="top"
                  :content="item.title"
                  popper-class="my-popper"
                  :offset="20"
              >
                <template #content  v-if="item.children.length>0">
                  <div class="btn-list-2">
                    <div v-for="(it,ins) in item.children" :class="data.currentStatus===it.id ? 'active' :'' " :key="it.id" class="btn-item-2"    @click="changeStatus(it,ins)">
                      <img :src="it.icon" alt="" >
                      <span>{{it.title}}</span>
                    </div>
                  </div>
                </template>
                <img :src="item.checked_icon" alt="" v-if="data.currentStatus===item.id" >
                <img :src="item.icon" alt="" v-else >
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </el-affix>


  </div>
</template>

<script>
import LeftTree from "./LeftTree";
import DynamicSlice from "./DynamicSlice";
import SliceCondition from "./SliceCondition";
import {inject, onMounted, reactive} from "vue";
import {getNavTree} from "../api";
// 引入图片
import fenzhi from '../assets/fenzhi.png'
import fenzhi_selected from '../assets/fenzhi-selected.png'
import setting from '../assets/setting.png'
import setting_selected from '../assets/setting-selected.png'

export default {
  name: "Center",
  components: {
    LeftTree,
    DynamicSlice,
    SliceCondition
  },
  setup() {
    let data = reactive({
          navTree: [],
          showLeft: false,
          showRight: true,
          treeItem: {},
          currentStatus: 0,// 0,1,2
          bottom_btn_groups: [
            {
              id: 1,
              title: '状态1',
              icon: fenzhi,
              checked_icon: fenzhi_selected,
              children:[]
            },
            {
              id: 2,
              title: '状态2',
              icon: setting,
              checked_icon: setting_selected,
              children: []
            },
            {
              id: 3,
              title: '状态3',
              icon: fenzhi,
              checked_icon: fenzhi_selected,
              children:[
                {
                  id: 31,
                  title: '状态11',
                  icon: fenzhi,
                  checked_icon: fenzhi_selected,
                  children:[]
                },
                {
                  id: 32,
                  title: '状态32',
                  icon: setting,
                  checked_icon: setting_selected,
                  children: []
                },
                {
                  id: 33,
                  title: '状态33',
                  icon: fenzhi,
                  checked_icon: fenzhi_selected,
                  children:[]
                },
                {
                  id: 34,
                  title: '状态34',
                  icon: setting,
                  checked_icon: setting_selected,
                  children: []
                },
              ]
            },
            {
              id: 4,
              title: '状态4',
              icon: setting,
              checked_icon: setting_selected,
              children: []
            },
            {
              id: 5,
              title: '状态5',
              icon: fenzhi,
              checked_icon: fenzhi_selected,
              children:[]
            },
            {
              id: 6,
              title: '状态6',
              icon: setting,
              checked_icon: setting_selected,
              children: []
            },
            {
              id: 7,
              title: '状态7',
              icon: fenzhi,
              checked_icon: fenzhi_selected,
              children:[
                {
                  id: 71,
                  title: '状态11',
                  icon: fenzhi,
                  checked_icon: fenzhi_selected,
                  children:[]
                },
                {
                  id: 72,
                  title: '状态32',
                  icon: setting,
                  checked_icon: setting_selected,
                  children: []
                },
              ]
            },
            {
              id: 8,
              title: '状态8',
              icon: setting,
              checked_icon: setting_selected,
              children: [
                {
                  id: 81,
                  title: '状态11',
                  icon: fenzhi,
                  checked_icon: fenzhi_selected,
                  children:[]
                },
                {
                  id: 82,
                  title: '状态32',
                  icon: setting,
                  checked_icon: setting_selected,
                  children: []
                },
              ]
            },
            {
              id: 9,
              title: '状态9',
              icon: fenzhi,
              checked_icon: fenzhi_selected,
              children:[
                {
                  id: 91,
                  title: '状态11',
                  icon: fenzhi,
                  checked_icon: fenzhi_selected,
                  children:[]
                },
                {
                  id: 92,
                  title: '状态32',
                  icon: setting,
                  checked_icon: setting_selected,
                  children: []
                },
              ]
            },
            {
              id: 10,
              title: '状态10',
              icon: setting,
              checked_icon: setting_selected,
              children: [

              ]
            },
            {
              id: 11,
              title: '状态11',
              icon: fenzhi,
              checked_icon: fenzhi_selected,
              children:[]
            },
            {
              id: 12,
              title: '状态12',
              icon: setting,
              checked_icon: setting_selected,
              children: []
            }
          ],
        }),
        catchEvent = inject('catchEvent'),
        selectItem = (item, index) => {
          if (item.active && item.active === true) return;
          data.navTree.forEach((tree, i) => {
            tree.active = i === index;
          })
          data.treeItem = item;
          catchEvent('nav导航组件--点击', 'selectItem', item)
        },
        toggleLeft = () => {
          data.showLeft = !data.showLeft;
        },
        closeRightTab=()=>{
          data.currentStatus = 0
        },
        toggleRight = () => {
          if (data.currentStatus === 0) return;
          data.showRight = !data.showRight;
        },
        getCheckedNavData = (check_data) => {
          // console.log(check_data)
          catchEvent('nav导航组件--选择', 'getCheckedNavData', check_data)
        },
        receiveSliceFormData = (form_data) => {
          // console.log(form_data)
        },
        receiveSliceConditionData = (condition) => {
          // console.log(condition)
        },
        footerInfo = inject('footerInfo'),
        centerHeight = `calc(100vh - ${50+footerInfo.footerHeight}px)`,
        changeStatus = (item, index) => {
          if (item.children.length>0 && !item.active){
            return false
          }
          if (item.active && item.active === true) {
            item.active = false;
            data.currentStatus = 0;
            catchEvent('底部--切换状态', 'changeStatus', 0)
            return false;
          }
          data.currentStatus = item.id;
          data.bottom_btn_groups.forEach((btn, i) => {
            btn.active = i === index;
          })
          catchEvent('底部--切换状态', 'changeStatus', item.id)
        }

    onMounted(async () => {
      let {data: res} = await getNavTree();
      data.navTree = res;
    })

    return {
      data,
      selectItem,
      toggleLeft,
      toggleRight,
      getCheckedNavData,
      receiveSliceFormData,
      changeStatus,
      receiveSliceConditionData,
      centerHeight,
      closeRightTab
    }
  }
}
</script>

<style scoped lang="less">
.center {
  @background-color: #06ceae;
  @popUpColor: rgba(18, 33, 46, 0.8);
  @popUpBorderColor: rgb(18, 33, 46);

  .arrow-expand {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid white;
  }

  .arrow-collapse {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid white;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    margin-left: -4px;
  }

  .collapse {
    height: 48px;
    background: @background-color;
    width: 22px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  height: v-bind(centerHeight);
  position: relative;

  .left-nav {
    position: fixed;
    left: 0;
    top: 130px;

    .left-collapse {
      .collapse;
      float: left;
    }

    .nav-tree-list {
      width: 48px;
      background: @popUpColor;
      border-radius: 5px;
      color: #fff;
      float: left;
      border: 1px solid @popUpBorderColor;

      .nav-tree-item {
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;

        img {
          width: 30px;
        }

        &.iconActive {
          &:after {
            content: "";
            display: inline-block;
            width: 4px;
            height: 26px;
            background: @background-color;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 10px;
          }
        }
      }
    }

    .nav-tree-select {
      width: 270px;
      float: left;
      min-height: 232px;

    }
  }

  .right-nav {
    position: fixed;
    right: 0;
    top: 130px;

    .right-collapse {
      .collapse;
      float: right;
    }

    .form-box {
      float: right;
    }
  }

  .bottom-btn {
    width: 100%;

    .button_groups {
      text-align: center;

      .btn-list {
        display: flex;
        justify-content: center;

        .btn-item {
          width: 45px;
          background: rgb(52, 67, 79);
          padding: 5px;
          cursor: pointer;
          position: relative;
          &:hover{
            &:after{
              content: "";
              display: inline-block;
              width: 100%;
              height: 4px;
              background: @background-color;
              border-radius: 2px;
              position: absolute;
              left: 0;
              bottom: -1px;
            }
          }
          &.active{
            &:after{
              content: "";
              display: inline-block;
              width: 100%;
              height: 4px;
              background: @background-color;
              border-radius: 2px;
              position: absolute;
              left: 0;
              bottom: -1px;
            }
          }

          &:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
          }

          &:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
          }
        }
      }

      .btn-list-2{
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        height: 45px;
        width: 200px;
        .btn-item-2 {
          width: 45px;
          background: rgb(52, 67, 79);
          padding: 5px;
          cursor: pointer;
          position: relative;
        }
      }
    }
  }

}

#drawarea {
  width: 100%;
  height: 100%;
  overflow: hidden;
  img{
    width: 100%;
  }
  //display: flex;
  //justify-content: center;
  //align-items: center;
}



</style>
